<template>
  <div>
    <div style="margin: 20px">
      <!--v-if="$hasBP('btn.User.add')"-->
      <el-button type="primary" @click="">添 加 项 目</el-button>
      <!--v-if="$hasBP('btn.User.remove')"-->
      <el-button type="danger" @click="">批量删除</el-button>
      <el-button type="danger" @click="outputExcel">导出</el-button>
    </div>
    <!-- 表格 -->
    <el-card style="margin: 20px">
      <div>
        <el-table :data="projectList" style="width: 100%; margin-bottom: 20px" border>
          <el-button type="primary" icon="el-icon-plus" style="margin-left: 20px">添加</el-button>

          <el-table-column type="index" label="序号" align="center" width="80">
          </el-table-column>
          <el-table-column prop="name" label="项目名称"> </el-table-column>
          <el-table-column label="负责人" prop="leader">
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <HintButton title="gogogo" icon="el-icon-edit" size="mini" type="primary" name="修改"
                @click="editHandler(row)"></HintButton>
              <HintButton title="gogogo" icon="el-icon-delete" size="mini" name="删除" type="danger"
                @click="deleteHandler(row)"></HintButton>
              <HintButton title="gogogo" icon="el-icon-info" size="mini" name="详情" type="info"></HintButton>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination @size-change="" @current-change="" :current-page="page" :page-sizes="[3, 6, 9, 12]"
          :page-size="limit" layout="prev, pager,next,jumper,->,sizes,total " :total="total"
          style="text-align: center; margin-right: 50px">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import ExportJsonExcel from 'js-export-excel';
export default {
  name: 'DevelopDaily',
  data() {
    return {
      page: 1,
      limit: 5,
      total: 20,
      projectList: []
    }
  },
  methods: {
    outputExcel() {
      // 表格数据
      const data = [...this.projectList];
      // excel导出的数据
      const sheetData = [];
      // excel导出的需要的对象
      const option = {};
      if (data && data.length > 0) {
        // 循环数组表格的每一行数据进行导出的格式整理
        for (const item of data) {
          const obj = {
            项目名称: item.name,
            负责人: item.leader,
            创建时间: item.createTime,
          };
          sheetData.push(obj);
        }
      }
      // 文件名
      option.fileName = '项目列表';
      option.datas = [
        {
          // excel表体数组
          sheetData,
          sheetName: 'sheet',
          sheetFilter: [
            '项目名称',
            '负责人',
            '创建时间',
          ],
          // excel表头数组
          sheetHeader: [
            '项目名称',
            '负责人',
            '创建时间',
          ]
        }
      ];
      // 创建导出excel对象
      const toExcel = new ExportJsonExcel(option);
      // 导出方法
      toExcel.saveExcel();
    },
  },
  mounted() {
    this.$api.project.getProjectInfo(this.page, this.limit).then(res => {
      this.projectList = res.data.items
      console.log(res);
    })
  }
}
//   [
//     {
//         "pid": 1,
//         "name": "一标六实产品",
//         "leader": "刘钰阁",
//         "proStartTime": "2023-04-01T10:09:57.000+00:00",
//         "proEndTime": "2023-04-26T10:10:02.000+00:00",
//         "status": 2,
//         "number": "刘钰阁",
//         "testNumber": "威威",
//         "createTime": "2023-04-10T10:12:05.946+00:00",
//         "updateTime": "2023-04-10T13:24:43.502+00:00"
//     }
// ]
</script>

<style lang="less" scoped></style>